<template>
    <div class="box">
        <div class="box_top">
            <div class="box_top_left">
                <div class="left_item" v-for="(item, i) in topimg" :key="i">
                    <img :src="item.src" style="width: 50px;height: 50px;border-radius: 4px;" />
                    <span style="text-align: center;display: block;font-family: '黑体';">{{ item.title }}</span>
                </div>
            </div>
            <div class="box_top_center">
                <div class="cen_item" v-for="(item, i) in cenlist" :Key="i">
                    <div class="item_bod">{{ item }}</div>
                </div>
                <div class="cen_item">
                    <div class="item_bod">更多<i :class="iconst"></i></div>
                </div>
            </div>
            <div class="box_top_right">
                <div class="right_item" v-for="(item, i) in rightimg" :key="i">
                    <i :class="item.icon" style="margin-right: 4px;"></i>
                    <span>{{ item.name }}</span>
                </div>
            </div>
        </div>
        <div class="box_home">
            <div class="home_flex">
                <img :src="img" style="width: 100%;height: 100%;border-radius: 4px;" />
                <div class="flex_post">
                    <p>横扫饥饿，鬼臂女王做回自己</p>
                </div>
            </div>
            <div class="home_flex">
                <div v-for="(item, i) in imgs" :key="i" class="flex_box">
                    <div v-for="(items, index) in item.list" :key="index" class="box_list">
                        <img :src="items.img" style="width: 100%;height: 100%;border-radius: 4px;" />
                        <div class="list_p">{{ items.title }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="list_box">
            <el-card class="box-card list_box_item" v-for="(item, index) in boxlist" :key="index">
                <div>
                    <img :src="item.src" style="width: 100%;height: 100%;border-radius: 4px;" />
                </div>
                <div style="padding: 0 6px;">
                    <p class="box_item_p">{{ item.title }}</p>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            img: require('@/assets/one.png'),
            imgs: [
                { list: [] },
                { list: [] }
            ],
            iconst:'el-icon-arrow-down',
            boxlist: [],
            topimg: [],
            cenlist: ['番剧', '国创', '综艺', '动画', '鬼畜', '舞蹈', '娱乐', '科技', '美食', '汽车', '运动', '电影', '电视剧', '纪录片', '游戏', '音乐', '影视', '知识', '咨询', '生活', '时尚'],
            rightimg: [],
        }
    },
    mounted() {
        // 初始化数据
        this.setData()
    },
    methods: {
        setData() {
            this.imgs[0].list = [
                { img: require('@/assets/t1.png'), title: '【星铁/原神/崩3】填翻角色魅力，尽现其中！如果你也喜欢崩原崩！这首《与天齐》送给你！' },
                { img: require('@/assets/t2.png'), title: '厌恶着一切，又渴望着关怀' },
                { img: require('@/assets/t3.png'), title: 'VUP十人合唱 | 为我们闪耀的青春《干杯》【毕业季】' },
            ]
            this.imgs[1].list = [
                { img: require('@/assets/b1.png'), title: '你经历过“镇站神番”的时代吗？立站之本！拯救B站的IP！老宅狂欢的2011年！！！' },
                { img: require('@/assets/b2.png'), title: '“哭吗 神不会哭的吧？可他们又何尝不是有心有情的「人」啊”【原神/四神】' },
                { img: require('@/assets/b3.png'), title: '每天学画画半小时，用兴趣养活自己！！', type: '广告位' }
            ]
            this.boxlist = [
                { src: require('@/assets/snip1.png'), title: '「旅行者，我真的很害怕，你忽然就到另一个世界去了...」【原神/崩坏：星穹铁道】' },
                { src: require('@/assets/snip2.png'), title: '【原神整活】百岁珊：别跟我表白，我不喜欢小孩子。爷：我会小心的。' },
                { src: require('@/assets/snip3.png'), title: '“全员稻妻，极乐净土！”' },
                { src: require('@/assets/snip4.png'), title: '【崩坏：星穹铁道】景元将军！你太坏蛋了啊啊啊！！！' },
                { src: require('@/assets/snip5.png'), title: '银狼：如何与卡芙卡打成一片〖白白剧场〗' },
                { src: require('@/assets/snip6.png'), title: '【原神/璃月填词】『逍遥叹』行吟千里送英豪，山河留我徒寂寥' },
                { src: require('@/assets/snip7.png'), title: '【银狼】室内系的银狼！大脑已被银狼骇入，要被银狼洗脑啦！！！！' },
                { src: require('@/assets/snip8.png'), title: '影~我打不过她！qwq' },
                { src: require('@/assets/snip9.png'), title: '短短529抽，比我的一生都精彩' },
                { src: require('@/assets/snip10.png'), title: '【崩三&星铁】世界上的另一个我' },
                { src: require('@/assets/snip11.png'), title: '“⚡你管这叫极致踩点？”' },
                { src: require('@/assets/snip12.png'), title: '一种砸到脸上的帅！！' },
                { src: require('@/assets/snip13.png'), title: '【原神|填翻-全版本】“旅行者一首《way back home》带你回顾原神全版本”' },
                { src: require('@/assets/snip14.png'), title: '【星穹铁道动画】开拓者：抽银狼的正确姿势~应该是这样！' },
                { src: require('@/assets/snip15.png'), title: '⚡看 爷 给 你 坐 忘 道⚡' },
                { src: require('@/assets/snip16.png'), title: '存护之誓【崩坏：星穹铁道】【雅利洛-VI号星球群像曲】' },
                { src: require('@/assets/snip17.png'), title: '"我背负天才骂名，不问别离"' },
                { src: require('@/assets/snip18.png'), title: '“悲剧并非终结，而是希望的起始”' },
                { src: require('@/assets/snip19.png'), title: '“我叹那春花秋月，不问别离”【国漫混剪】' },
                { src: require('@/assets/snip20.png'), title: '《 米 哈 游 玩 家 现 状 》' },
                { src: require('@/assets/snip21.png'), title: '治愈神曲《春娇与志明》，如今的你还在向往二次元吗？' },
                { src: require('@/assets/snip22.png'), title: '落梦入叶，一路生花——【原神×角色集结】3.7国家篇·须弥' },
                { src: require('@/assets/snip23.png'), title: '【愚人众】“我在这剑指天理，不问别离”' },
                { src: require('@/assets/snip24.png'), title: '心酸！哪怕自己已经遍体鳞伤 也从未想过怪罪任何人 将所有的过错怪在自己身上 背负莫须有的罪名 【玫瑰少年/优菈/原神】' },
                { src: require('@/assets/snip25.png'), title: '星：忍不了啦！！！一棒把模拟宇宙打爆！！！' },
            ]
            this.topimg = [
                { src: require('@/assets/top1.png'), title: '动态' },
                { src: require('@/assets/top2.png'), title: '热门' },
                { src: require('@/assets/top3.png'), title: '频道' }
            ]
            this.rightimg = [
                { icon: 'el-icon-s-release', name: '专栏' },
                { icon: 'el-icon-s-flag', name: '活动' },
                { icon: 'el-icon-s-comment', name: '社区中心' },
                { icon: 'el-icon-video-camera-solid', name: '直播' },
                { icon: 'el-icon-s-opportunity', name: '课堂' },
                { icon: 'el-icon-star-on', name: '新歌热榜' }
            ]
        }
    }
}
</script>
<style lang="scss" scoped>
.box_top {
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;

    .box_top_left {
        width: 17%;
        display: flex;
        justify-content: space-between;

        .left_item:nth-child(2) {
            text-align: center;
        }

        .left_item:last-child {
            text-align: right;
        }
    }

    .box_top_center {
        width: 58%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .cen_item {
            // width: 60px;
            width: 8.4%;
            font-size: 14px;
            // line-height: 38px;
            text-align: center;
            color: #687079;
            font-family: '黑体';
            font-size: 14px;
            font-weight: 600;

            .item_bod {
                background-color: #cadfe4;
                padding: 4px 0;
                margin: 8px 5px;
                border-radius: 4px;
                cursor: pointer;
            }
        }
    }

    .box_top_right {
        width: 17%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .right_item {
            line-height: 38px;
            font-family: '黑体';
            font-size: 14px;
        }
    }
}

.box_home {
    display: flex;
    justify-content: space-between;

    .home_flex:first-child {
        width: 40%;
        box-sizing: border-box;
        margin-right: 10px;
        position: relative;

        .flex_post {
            position: absolute;
            bottom: 0;
            width: 100%;
            color: #FFFFFF;
            // background-color: #76e3ff;
            opacity: 2;
            font-size: 16px;
            font-weight: 700;
        }
    }

    .home_flex:last-child {
        width: 60%;
        margin-left: 10px;
        // border: 1px solid green;
        box-sizing: border-box;

        .flex_box {
            display: flex;
            justify-content: space-between;

            .box_list {
                position: relative;

                .list_p {
                    position: absolute;
                    bottom: 0;
                    color: #FFFFFF;
                    display: -webkit-box;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2; //当属性值为3，表示超出3行隐藏
                }
            }

            .box_list:nth-child(2) {
                margin: 0 20px;
            }
        }

        .flex_box:first-child {
            margin-bottom: 20px;
        }
    }
}

.list_box {
    margin-top: 40px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .list_box_item {
        width: 18%;
        margin-bottom: 20px;
        border-radius: 10px;
        cursor: pointer;

        .box_item_p {
            display: -webkit-box;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; //当属性值为3，表示超出3行隐藏
        }

        .box_item_p:hover {
            color: #00aef0;
        }
    }
}

::v-deep .el-card__body,
.el-main {
    padding: 0;
}</style>